<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./../vue.min.js"></script>
    </head>
    <body>
    <div id="app" class="col-md-12">
    	<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">{{title | msgFormat('坏学生')}}</h3>
			</div>
			<div class="panel-body form-inline">
				<label>
					id:
					<input v-model="id" class="form-control" @keyup.f2="add"/>
				</label>
				<label>
					name:
					<input v-model="name" class="form-control" @keyup.enter="add"/>
				</label>
				<button class="btn btn-primary" @click="add">add</button>

				<label>
					search:
					<input v-model="keywords" class="form-control"/>
				</label>
			</div>
    		<table class="table table-bordered table-hover table-striped">
    			<thead>
    				<th>ID</th>
    				<th>name</th>
    				<th>birthday</th>
    				<th>operation</th>
    			</thead>
    			<tbody>
    				<tr v-for="item in search(keywords)" v-bind:key="item.id">
    					<td>{{item.id}}</td>
    					<td>{{item.name}}</td>
    					<td>{{item.create_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}</td>
    					<td><a href="" @click.prevent="del(item.id)">delete</a></td>
    				</tr>
    			</tbody>
    		</table>
    	</div>
	</div>
	
	<div id="app2">

		{{new Date() | format}}
	</div>
    <script>

		//自定义按键修饰符
		Vue.config.keyCodes.f2=113;

		Vue.filter('msgFormat',function(data,arg){
			return data.replace(/好/g,arg)
		});

		Vue.filter('dateFormat',function(str,pattern){
			var dte = new Date(str);
			var y = dte.getFullYear();
			var M = dte.getMonth() + 1;
			var d = dte.getDate();
			
			if(pattern === 'yyyy-MM-dd'){
				return `${y}-${M}-${d}`;	
			}else{
				var h = dte.getHours();
				var m = dte.getMinutes();
				var s = dte.getSeconds();
				return `${y}-${M}-${d} ${h}:${m}:${s}`;
			}
			

		});

    	new Vue({
    		el:'#app',
    		data:{
				title:'好好学习天天向上,好成绩',
    			id:'',
    			name:'',
				keywords:'',
    			grid_list:[{
    				id:1,
    				name:'bob',
    				create_time:new Date()
    			}]
    		},
    		methods:{
    			add(){
    				this.grid_list.push({
    					id:this.id,
    					name:this.name,
    					create_time:new Date()
    				});
    				this.id = '';
    				this.name = '';
    			},
    			del(id){
					/*this.grid_list.some((item,i)=>{
						if(item.id == id){
							this.grid_list.splice(i,1)
							return true;
						}
					})*/

					var index = this.grid_list.findIndex(item =>{
						if(item.id == id){
							return true;
						}
					})

					this.grid_list.splice(index,1);
    			},
				search(keywords){
					var newList =[];

					/*this.grid_list.forEach(item =>{
						if(item.name.indexOf(keywords) != -1){
							newList.push(item);
						}
					})*/

					return this.grid_list.filter(item=>{
						if(item.name.includes(keywords)){
							return item;
						}
					})

					//return newList;
				}
    		}
    	});

		new Vue({
			el:'#app2',
			data:{},
			methods:{

			},
			filters:{
				format(str,pattern){
					var dte = new Date(str);
					var y = dte.getFullYear();
					var M = (dte.getMonth() + 1).toString().padStart(2,"0");
					var d = (dte.getDate()).toString().padStart(2,"0");
					
					if(pattern === 'yyyy-MM-dd'){
						return `${y}-${M}-${d}`;	
					}else{
						var h = (dte.getHours()).toString().padStart(2,"0");
						var m = (dte.getMinutes()).toString().padStart(2,"0");
						var s = (dte.getSeconds()).toString().padStart(2,"0");
						return `${y}-${M}-${d} ${h}:${m}:${s}`;
					}
					

				}
			}
		})
    	
    </script>
    </body>
</html>